<template>
<div class="about">
  <!-- 模板中读取或者更新ref数据不用指定value, 直接指定ref对象, 内部会自动.value -->
  <h2>count: {{count}}</h2>

  <button @click="increment">增加</button>
  <button @click="count++">增加2</button>
</div>
</template>

<script lang="ts">
import {
  ref
} from 'vue'
export default {
  name: 'About',


  beforeCreate () {
    console.log('beforeCreate()')
  },

  /* 
  所有的组合API和响应式API(函数)都是在setup中调用
  在setup中this是undefined, 不能再通过this来操作组件
  setup是在beforeCreate()之前调用
  */
  setup () {
    console.log('setup', this)

    // 创建包含响应式数据ref对象
    const count = ref(1)

    console.log(count)

    function increment () {
      // 在js中更新ref数据得到更新value属性值
      count.value += 1
    }

    return { // 返回对象中的所有属性, 模板可以直接读取显示
      count,
      increment
    }
  }
}
</script>
